'use client';

import { useState } from 'react';

// RHF
import { useFormContext } from 'react-hook-form';

// ShadCn
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

// Utils
import { cn } from '@/lib/utils';

// Variables
import { DATE_OPTIONS } from '@/lib/variables';

// Icons
import { CalendarIcon } from 'lucide-react';

// Types
import { NameType } from '@/types';

type DatePickerFormFieldProps = {
    name: NameType;
    label?: string;
};

const DatePickerFormField = ({ name, label }: DatePickerFormFieldProps) => {
    const { control } = useFormContext();

    const [isPopoverOpen, setIsPopoverOpen] = useState(false);

    return (
        <>
            <FormField
                control={control}
                name={name}
                render={({ field }) => (
                    // @ts-ignore
                    <FormItem>
                        <div className="flex justify-between gap-5 items-center text-sm">
                            <div>
                                {/* @ts-ignore */}
                                <FormLabel>{label}:</FormLabel>
                            </div>
                            <div>
                                {/* @ts-ignore */}
                                <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                                    {/* @ts-ignore */}
                                    <PopoverTrigger asChild>
                                        {/* @ts-ignore */}
                                        <FormControl>
                                            {/* @ts-ignore */}
                                            <Button variant={'outline'} className={cn('w-[13rem]', !field.value && 'text-muted-foreground')}>
                                                <CalendarIcon className="mr-2 h-4 w-4" />
                                                {field.value ? (
                                                    new Date(field.value).toLocaleDateString('en-US', DATE_OPTIONS)
                                                ) : (
                                                    <span>Pick a date</span>
                                                )}
                                            </Button>
                                        </FormControl>
                                    </PopoverTrigger>
                                    {/* @ts-ignore */}
                                    <PopoverContent className="w-auto p-0">
                                        <Calendar
                                            mode="single"
                                            // @ts-ignore
                                            captionLayout="dropdown-buttons"
                                            defaultMonth={field.value}
                                            selected={new Date(field.value)}
                                            onSelect={(e) => {
                                                field.onChange(e);
                                                setIsPopoverOpen(false);
                                            }}
                                            disabled={(date) => date < new Date('1900-01-01')}
                                            fromYear={1960}
                                            toYear={new Date().getFullYear() + 30}
                                            initialFocus
                                        />
                                    </PopoverContent>
                                </Popover>
                                {/* @ts-ignore */}
                                <FormMessage />
                            </div>
                        </div>
                    </FormItem>
                )}
            />
        </>
    );
};

export default DatePickerFormField;
